<template>
	<view class="card-warp" @click="goDetail">
		<view class="header">
			<view class="left">
				<view class="productName">{{data.productName}}</view>
				<view class="userinfo">
					<image class='avatar' :src="data.avatar"></image>
					<text>{{data.nickname}}</text>
				</view>
			</view>
			<view class="right">{{data.productPrice}}元</view>
		</view>
		<view class="content">
			<view class="text-body">
				随着科技的快速发展，数字化已经渗透到我们生活的方方面面。无论是购物、学习、工作，还是社交、娱乐，都越来越依赖于各种数字化平台和工具。这种趋势在提升效率和便利性的同时，也带来了新的挑战和问题。例如，隐私保护成为了公众关注的焦点，如何在享受数字便利的同时确保个人信息不被滥用，是一个亟待解决的问题。此外，随着人工智能的普及，自动化和智能化的应用场景越来越广泛，人类的生活和工作方式也在发生深刻的变革，未来的社会将变得更加数字化和智能化。
			</view>
			<view v-if="productImages.length">
				<image class="avatar-img" :src="productImages[0]"></image>
			</view>
		</view>
		<view class="footer">
			<view class="data-info">
				<view class="data-info-item">
					<image src="../../../../static/view.png" class="icon-btn"></image>
					<view class="data-text">1256</view>
				</view>
				<view class="data-info-item">
					<image src="../../../../static/view.png" class="icon-btn"></image>
					<view class="data-text">1256</view>
				</view>
			</view>
			<view class="productType">出售</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		getCurrentInstance,
		onMounted,
		nextTick
	} from 'vue';
	import sheep from '@/sheep';

	const props = defineProps({
		data: {
			type: Object,
			default: () => ({}),
		},
	});
	
	const goDetail =()=>{
		sheep.$router.go('/pages/second/detail', {
			id:props.data.productId
		});
	}

	const productImages = computed(() => {
		const productImages = (props.data.productImages || "").split(",")
		return productImages
	})

	console.log("props-->", props.data)
</script>

<style scoped lang="scss">
	.card-warp {
		background-color: #fff;
		padding: 20rpx;

		.header {
			display: flex;
			flex-direction: row;

			.left {
				flex: 1;

				.productName {
					font-size: 36rpx;
					font-weight: 600;
				}

				.userinfo {
					display: flex;
					align-items: center;
					margin: 20rpx 0;

					.avatar {
						margin-right: 10rpx;
						border-radius: 100%;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.right {
				color: rgb(18, 158, 149);
			}
		}

		.content {
			display: flex;
			flex-direction: row;

			.text-body {
				margin-right: 14rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				/* 限制显示的行数，修改为需要的行数 */
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: normal;
			}

			.avatar-img {
				width: 140rpx;
				height: 110rpx;
			}
		}
		
		.footer{
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			.productType{
				color: #fff;
				background-color: rgb(18, 158, 149);
				border-radius: 4rpx;
				padding: 2rpx 4rpx;
				width: max-content;
			}
			.data-info{
				flex:1;
				display: flex;
				flex-direction: row;
				.data-info-item{
					display: flex;
					flex-direction: row;
					font-size: 24rpx;
					align-items: center;
					.icon-btn{
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
					+.data-info-item{
						margin-left: 20rpx;
					}
				}
			}
		}
		
	}
</style>